<script setup>
import { ref,computed } from 'vue';
import { analysisModelService, analysisScoreService } from '../../api/score';
import { onMounted } from 'vue'

onMounted(() => {
  //analysisScore()
  modelScore()
}) 
//模拟数据value的字段对应Y轴，name字段对应X轴
  const data=ref([])
const option=computed(()=>{
  return{
    xAxis:{
      type:'category',
      data:data.value.map(v=>v.examsMessage)
    },
    yAxis:{
      type:'value',
    },
    series:[
      {
        type:'line',
        data:data.value.map(v=>v.scoreTotal)
      }
    ]
  }
})
 

//数据条数模型，以实现接口复用
const modelNum=ref(10)
//X.Y轴数据模型
var examsMessage=ref()
var scoreTotal=ref()
//评语数据模型
const analysis=ref()
//调用成绩分析接口
const analysisScore=async()=>{
  let result = await analysisScoreService()
  analysis.value=result.data
}
//调用获取图表数据模型接口
const modelScore=async()=>{
  let result=await analysisModelService(modelNum.value)
  data.value=result.data
}

</script>
 
<template>
  <e-charts class="chart" :option="option" />
  最新成绩分析如下：
  <br>{{ analysis }}<br/>
</template>
 
<style>
.chart{
  height: 400px;
}
</style>